<!DOCTYPE html>
<!-- saved from url=(0065)http://www.vinqon.com/codeblog/Demo/canvas_image/color_worker.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo of Canvas</title>
    <style type="text/css" media="all">
    html,body{ margin:0; padding:0; height:100%; background-color:#222}
    #stage{ width:68%; height:100%; background-color:#ddd; float:left; text-align:center;}
    #cvs{ margin:20%;-webkit-box-shadow:0 0 8px #000;-moz-box-shadow:0 0 8px #000;}
    #control{ width:30%;height:100%; float:left; background-color:#222}
    #control dl,#notice{ margin:15px auto; width:200px; background-color:#444; padding:5px;-webkit-border-radius:3px;-moz-border-radius:3px}
    #control dt{ font-size:12px; color:#fff}
    #notice{ font-size:12px; color:#9e5656; background-color:#f6f5bd; margin-top:40px; border:1px solid #9e8a56}
    </style>
<style type="text/css">.jlhlebbhengjlhmcjebbkambaekglhkf {top: 0px; left: 0px;min-width: 30px;max-width: 300px;font-size: 13px;font-family: arial, helvetica, sans-serif;opacity: .93;padding:0px;position:absolute;display:block;z-index: 999997;font-style: normal;font-variant: normal;font-weight: normal;}#jlhlebbhengjlhmcjebbkambaekglhkf_up{text-align: center;padding:0px;margin: 0px;}#jlhlebbhengjlhmcjebbkambaekglhkf_cont{background-color: #729FCF;font-family: arial, helvetica, sans-serif-webkit-box-shadow: #729FCF 0px 0px 2px;color: #FFFFFF;padding:7px;-webkit-border-radius: 5px;}#jlhlebbhengjlhmcjebbkambaekglhkf_down{text-align: center;padding:0px;margin: 0px;}</style></head>
<body>
<div id="stage">
    <canvas id="cvs" width="300" height="200">连Canvas也不支持……快给我换浏览器！</canvas>
</div>
<div id="control">
<div id="notice">注意：请使用Chrome或者Safari浏览</div>
<dl>
    <dt>红通道：</dt>
    <dd><input type="range" min="-10" max="10" step="1" value="0" id="redChannel"></dd>
</dl>
<dl>
    <dt>绿通道：</dt>
    <dd><input type="range" min="-10" max="10" step="1" value="0" id="greenChannel"></dd>
</dl>
<dl>
    <dt>蓝通道：</dt>
    <dd><input type="range" min="-10" max="10" step="1" value="0" id="blueChannel"></dd>
</dl>
<dl>
    <dt>亮度：</dt>
    <dd><input type="range" min="-8" max="8" step="0.5" value="0" id="brightChannel"></dd>
</dl>
<dl>
    <dt>明度：</dt>
    <dd><input type="range" min="-10" max="10" step="1" value="0" id="greyChannel"></dd>
</dl>
</div>


<script type="text/javascript">
    if (document.getElementById("cvs").getContext)
    (function() {
        var img = new Image(),
        canvas = document.getElementById("cvs").getContext("2d"),
        original = null,
        current = null,
        width = 0,
        height = 0;
        img.src = "9.jpg";
        img.onload = function () {
            width = document.getElementById("cvs").width = img.width; //Set the size of canvas based on the loading picture
            height = document.getElementById("cvs").height = img.height;
            canvas.drawImage(img, 0, 0, width, height);
            current = original = canvas.getImageData(0, 0, width, height);
        }

        //All are binding the events below.
        document.getElementById("redChannel").onchange = function () {
            var local = canvas.getImageData(0, 0, width, height),
              level = this.value / 10;
            for (var i = 0; i < current.data.length; i += 4) {
                local.data[i] = current.data[i] + (255 - current.data[i]) * level;
            }
            canvas.putImageData(local, 0, 0, 0, 0, width, height);
            this.onblur = function () {
                current = local;
            }
        }

        document.getElementById("greenChannel").onchange = function () {
            var local = canvas.getImageData(0, 0, width, height),
              level = this.value / 10;
            for (var i = 0; i < current.data.length; i += 4) {
                local.data[i + 1] = current.data[i + 1] + (255 - current.data[i + 1]) * level;
            }
            canvas.putImageData(local, 0, 0, 0, 0, width, height);
            this.onblur = function () {
                current = local;
            }
        }

        document.getElementById("blueChannel").onchange = function () {
            var local = canvas.getImageData(0, 0, width, height),
              level = this.value / 10;
            for (var i = 0; i < current.data.length; i += 4) {
                local.data[i + 2] = current.data[i + 2] + (255 - current.data[i + 2]) * level;
            }
            canvas.putImageData(local, 0, 0, 0, 0, width, height);
            this.onblur = function () {
                current = local;
            }
        }

        document.getElementById("brightChannel").onchange = function () {
            var local = canvas.getImageData(0, 0, width, height),
              level = this.value * 25;
            for (var i = 0; i < current.data.length; i += 4) {
                local.data[i] = current.data[i] + level;
                local.data[i + 1] = current.data[i + 1] + level;
                local.data[i + 2] = current.data[i + 2] + level;
            }
            canvas.putImageData(local, 0, 0, 0, 0, width, height);
            this.onblur = function () {
                current = local;
            }
        }

        document.getElementById("greyChannel").onchange = function () {
            var local = canvas.getImageData(0, 0, width, height),
              level = this.value / 10;
            for (var i = 0; i < current.data.length; i += 4) {
                local.data[i] = current.data[i] + (255 - current.data[i]) * level;
                local.data[i + 1] = current.data[i + 1] + (255 - current.data[i + 1]) * level;
                local.data[i + 2] = current.data[i + 2] + (255 - current.data[i + 2]) * level;
            }
            canvas.putImageData(local, 0, 0, 0, 0, width, height);
            this.onblur = function () {
                current = local;
            }
        }
    })()
</script></body></html>